<template>
  <div class="system-menu-container">
    <div class="breadcrumb-box">
      <Breadcrumb />
    </div>

    <div class="page-main">
      <el-tabs v-model="activeName" class="demo-tabs"  @tabClick="clickTab">
        <el-tab-pane label="退出率(全院)" name="first"><exit-all></exit-all></el-tab-pane>
        <el-tab-pane label="退出率（科室）" name="second"><exit-office></exit-office></el-tab-pane>
        <el-tab-pane label="退出原因" name="third"><exit-reason v-if="activeName=='third'"></exit-reason></el-tab-pane>
        <el-tab-pane label="手术当日取消" name="fourth"><exit-cancel v-if="activeName=='fourth'"></exit-cancel></el-tab-pane>
        <el-tab-pane label="延迟出院率" name="fifth"><exit-delay v-if="activeName=='fifth'"></exit-delay></el-tab-pane>

      </el-tabs>
    </div>


  </div>
</template>

<script setup name="dataStatistics-dataCenter-appointment">
import { storeToRefs } from 'pinia';
import { useRoutesList } from '/@/stores/routesList';
import exitAll from './components/exit/exitAll.vue';
import exitOffice from './components/exit/exitOffice.vue';
import exitReason from './components/exit/exitReason.vue';
import exitCancel from './components/exit/exitCancel.vue';
import exitDelay from './components/exit/exitDelay.vue';



// 引入组件
const Breadcrumb = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/breadcrumb.vue'));

// 定义变量内容
const stores = useRoutesList();
const activeName = ref('first');
const state = reactive({
  tableData: {
    data: [],
    loading: true,
  },
});

// 定义方法
const clickTab= (tab, event) => {

}




// 页面加载时
onMounted(() => {

});
</script>
